<template>
	<view>
		<!-- 资金信息 -->
		<view class="moeny-box">
			<view class="money-top">
				<view>
					<view class="money-title">总资产</view>
					<view class="money-num">{{info.priceall}}</view>
				</view>
				<view>
					<view class="money-title">昨日收益</view>
					<view class="money-num">{{info.zuori}}</view>
				</view>
			</view>
			<view class='money-bototm'>
				<view>
					<view class="money-title">净资产</view>
					<view class="money-num">{{info.yprice}}</view>
				</view>
				<view>
					<view class="money-title">资产</view>
					<view class="money-num">{{info.jifen}}</view>
				</view>
				<view class="last-bottom">
					<view class="money-title">数权ZSDT</view>
					<view class="money-num">{{info.ctb}}</view>
				</view>
			</view>
		</view>
		<!-- 资金菜单 -->
		<view class="money-menu">
			<view @tap="toPage(1)">
				<i class="icon">&#xe605;</i>
				<view>财务</view>
			</view>
			<view @tap="toPage(2)">
				<i class="icon">&#xe61f;</i>
				<view>转账</view>
			</view>
			<view @tap="toPage(3)">
				<i class="icon">&#xe62b;</i>
				<view>充值</view>
			</view>
			<view @tap="toPage(4)">
				<i class="icon">&#xe635;</i>
				<view>复投</view>
			</view>
			<view @tap="toPage(5)">
				<i class="icon">&#xe61c;</i>
				<view>兑换</view>
			</view>
		</view>
		<!-- 财务记录时间轴 -->
		<view class="money-titles">释放明细</view>
		<view class="times">
			<view class="times-item" v-for="(item,key) in list" :style="key == list.length - 1 ? 'border:none':''">
				<view class="times-node"></view>
				<view class="times-tag"></view>
				<view class="times-content">
					<view class="times-money">
						<view>
							<text>金额</text>
							<text class="times-num" :style="item.price > 0 ? 'color: #67C23A;' : 'color: #F56C6C;'">{{item.price}}</text>
						</view>
						<view>
							<text>余额</text>
							<text class="times-num" style="">{{item.yprice}}</text>
						</view>
					</view>
					<view class="times-memo">
						{{item.memo}}
					</view>
					<view class="times-time">
						<i class="icon">&#xe6ce;</i>{{item.addtime}}
					</view>
				</view>
			</view>
			<view class="empty-info" v-if="!list.length">
				暂无记录
			</view>
		</view>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar.vue';
	export default{
		components:{
			tabBar,
		},
		data(){
			return {
				list : [],
				info:{},
			}
		},
		onLoad(e) {
			this.getData();
		},
		onNavigationBarButtonTap(e) {
			uni.scanCode({
				success(e) {
					if(e.result.length < 10) {
						uni.navigateTo({
							url:"transfer?username="+e.result
						})
					}else{
						uni.navigateTo({
							url:"../share/jump?url="+e.result
						})
					}
					
					
				}
			})
		},
		methods:{
			toPage(way){
				var url = '';
				switch(way){
					case 2:
						url = "transfer"
						break;
					case 3:
						url = "rechange"
						break;
					case 1:
						url = "finance"
						break;
					case 4:
						url = "futou"
						break;
					case 5:
						url = "exchange"
						break;
				}
				uni.navigateTo({
					url:url
				})
			},
			getData(){
				this.ajax('user/zijin',{
					data:{},
					success:(res) => {
						res = res.data;
						this.info = res.info.info;
						this.list = res.info.list;
					}
				});
			}
		}
	}
</script>

<style>
	.moeny-box{background: #409EFF;height:250upx;color:#FFFFFF;width: calc(100% - 40upx);padding:20upx;}
	.money-top,.money-bototm{height: 130upx;}
	.money-title{color:#dddddd;font-size: 30upx;}
	.money-num{font-size: 60upx;}
	.money-top > view{width: calc(50% - 20upx);float: left;}
	.money-top > view:last-child{text-align: right;}
	.money-bototm{margin-top:30upx;width: 100%;}
	.money-bototm > view{width: calc(33.3% - 20upx);float: left;}
	.money-bototm > view:nth-child(2){text-align: center;}
	.last-bottom{text-align: right;}
	.money-bototm .money-num{font-size: 30upx;}
	.money-menu{padding:20upx;margin:20upx;width: calc(100% - 80upx);background: #FFFFFF;border-radius: 10upx;overflow: hidden;}
	.money-menu > view{float: left;text-align: center;width: 20%;font-size: 30upx;color:#333333}
	.money-menu .icon{color:#409EFF;margin-bottom: 20upx;font-size: 45upx;}
	.times{margin-top:50upx}
	.times-item{position: relative;border-left: 1upx solid #aaaaaa;width: calc(100% - 80upx);margin-left:40upx;padding-bottom: 80upx;}
	.times-node{position: absolute;width: 30upx;height:30upx;border-radius: 50%;border:8upx solid #FFFFFF;top:-25upx;left:-23upx;z-index: 1;background: #409EFF;}
	.times-tag{position: absolute;border:15upx solid #FFFFFF;border-bottom-color: transparent;border-left-color: transparent;left:25upx}
	.times-content{padding:20upx;width: calc(100% - 80upx);background: #FFFFFF;margin-left: 50upx;border-radius: 5upx;box-shadow: 0 1px 1px rgba(26, 26, 26, .2);}
	.times-money{overflow: hidden;}
	.times-money > view{float: left;width: 50%;font-size: 30upx;padding-bottom: 10upx;}
	.times-money > view:last-child{text-align: right;}
	.times-num{margin-left: 20upx;}
	.times-memo{font-size: 30upx;margin-top:10upx;color:#666666;border-bottom: 1upx dashed #EEEEEE;padding-bottom: 20upx;}
	.times-time{color:#999;font-size: 25upx;margin-top: 20upx;}
	.times-time .icon{display: inline;margin-right: 10upx;color:#409EFF}
	.money-titles{font-size: 30upx;padding-left: 20upx;}
	.empty-info{width: calc(100% - 80upx);padding:20upx;margin:20upx;height:80upx;line-height: 80upx;text-align: center;color:#666666;font-size: 35upx;background: #FFFFFF;box-shadow: 0 1px 1px rgba(26, 26, 26, .2);}
</style>
